<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <div class="content">
          <div class="bd-title">{{title}}</div>
          <NSpace>
            <NForm
              ref="formRef"
              :model="formValue"
              label-placement="left"
              :label-width="180"
              label-align="right"
            >
              <h2 class="title">基本信息</h2>
              <NSpace>
                <NFormItem
                  label="姓名:"
                  path="name"
                >
                  <NInput
                    v-model:value="formValue.name"
                    placeholder="输入姓名"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="性别:"
                  path="sex"
                >
                  <NSelect
                    :options="sexListOption"
                    v-model:value="formValue.sex"
                    placeholder="请选择性别"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem label="头像:">
                  <div style="width: 250px">
                    <img
                      :src="userLogo"
                      class="img-image"
                    />
                  </div>
                  <!-- <NUpload 
                    :custom-request="(e: any) => commonUpload(e)"
                    multiple
                    @remove="(e: any) => commonRemove(e)"
                    :default-file-list="imgList" :max="1" list-type="image-card">
                  </NUpload> -->
                </NFormItem>
                <NFormItem
                  label="级别:"
                  path="levelCode"
                >
                  <NSelect
                    :options="listJOption"
                    v-model:value="formValue.levelCode"
                    placeholder="请选择级别"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="手机号:"
                  path="mobilePhone"
                >
                  <NInput
                    v-model:value="formValue.mobilePhone"
                    placeholder="输入手机号"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="证件类型:"
                  path="cardTypeCode"
                >
                  <NSelect
                    :options="listZOption"
                    v-model:value="formValue.cardTypeCode"
                    placeholder="请选择证件类型"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="证件号:"
                  path="cardNum"
                >
                  <NInput
                    v-model:value="formValue.cardNum"
                    placeholder="输入证件号"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="文润志愿服务联盟:"
                  path="leagueId"
                >
                  <NSelect
                    :options="listOption"
                    v-model:value="formValue.leagueId"
                    placeholder="请选择文润志愿服务联盟"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="现居住地:"
                  path="placeAddress"
                >
                  <NInput
                    v-model:value="formValue.placeAddress"
                    placeholder="输入现居住地"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="民族:"
                  path="nation"
                >
                  <NInput
                    v-model:value="formValue.nation"
                    placeholder="输入民族"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="常驻居民:"
                  path="residentFlag"
                >
                  <NSelect
                    :options="permanentListOption"
                    v-model:value="formValue.residentFlag"
                    placeholder="请选择是否常驻居民"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="学历:"
                  path="educationCode"
                >
                  <NSelect
                    :options="listSOption"
                    v-model:value="formValue.educationCode"
                    placeholder="请选择学历"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="单位/学校:"
                  path="organization"
                >
                  <NInput
                    v-model:value="formValue.organization"
                    placeholder="输入单位/学习"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="岗位/专业及年级:"
                  path="position"
                >
                  <NInput
                    v-model:value="formValue.position"
                    placeholder="输入岗位/专业及年级"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="婚姻状况:"
                  path="marriageCode"
                >
                  <NSelect
                    :options="listMOption"
                    v-model:value="formValue.marriageCode"
                    placeholder="请选择婚姻状况"
                    clearable
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
              </NSpace>
              <h2 class="title">服务岗位</h2>
              <NSpace>
                <NFormItem
                  label="拟服务岗位:"
                  path="clueName"
                >
                  <NCheckboxGroup 
                    v-model:value="serviceTypesChecked"
                    disabled>
                    <NSpace>
                      <NCheckbox
                        v-for="item in serviceTypes"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </NSpace>
                  </NCheckboxGroup>
                </NFormItem>
              </NSpace>
              <h2 class="title">联系方式</h2>
              <NSpace>
                <NFormItem
                  label="银行卡号:"
                  path="bankCard"
                >
                  <NInput
                    v-model:value="formValue.bankCard"
                    placeholder="输入银行卡号"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="开户号:"
                  path="bankName"
                >
                  <NInput
                    v-model:value="formValue.bankName"
                    placeholder="输入开户号"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="电子邮件:"
                  path="email"
                >
                  <NInput
                    v-model:value="formValue.email"
                    placeholder="输入电子邮件"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="紧急联系人:"
                  path="emergency"
                >
                  <NInput
                    v-model:value="formValue.emergency"
                    placeholder="输入紧急联系人"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="紧急联系电话:"
                  path="emergencyPhone"
                >
                  <NInput
                    v-model:value="formValue.emergencyPhone"
                    placeholder="输入紧急联系电话"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="通讯地址:"
                  path="mailAddress"
                >
                  <NInput
                    v-model:value="formValue.mailAddress"
                    placeholder="输入通讯地址"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="邮编:"
                  path="zipCode"
                >
                  <NInput
                    v-model:value="formValue.zipCode"
                    placeholder="输入邮编"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="固定电话:"
                  path="fixedPhone"
                >
                  <NInput
                    v-model:value="formValue.fixedPhone"
                    placeholder="输入固定电话"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="QQ:"
                  path="oicq"
                >
                  <NInput
                    v-model:value="formValue.oicq"
                    placeholder="输入QQ"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
              </NSpace>
              <h2 class="title">个人特长</h2>
              <NSpace>
                <NFormItem
                  label="语种及语言:"
                  path="languages"
                >
                  <NInput
                    v-model:value="formValue.languages"
                    placeholder="输入语种及语言"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="其他:"
                  path="otherSpeciality"
                >
                  <NInput
                    v-model:value="formValue.otherSpeciality"
                    placeholder="输入其他"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="专业特长:"
                  path="clueName"
                >
                  <NCheckboxGroup 
                    v-model:value="specialitysChecked"
                    disabled
                  >
                    <NSpace>
                      <NCheckbox
                        v-for="item in specialitys"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"
                      />
                    </NSpace>
                  </NCheckboxGroup>
                </NFormItem>
                <NFormItem
                  label="学习经历:"
                  path="studyInfo"
                >
                  <NInput
                    v-model:value="formValue.studyInfo"
                    placeholder="输入学习经历"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
                <NFormItem
                  label="工作经历:"
                  path="workInfo"
                >
                  <NInput
                    v-model:value="formValue.workInfo"
                    placeholder="输入工作经历"
                    style="width: 250px"
                    disabled
                  />
                </NFormItem>
              </NSpace>
              <NSpace>
                <NFormItem
                  label="对博物馆志愿者工作的看法:"
                  path="viewInfo"
                >
                  <NInput
                    v-model:value="formValue.viewInfo"
                    placeholder="输入对博物馆志愿者工作的看法"
                    style="width: 700px"
                    type="textarea"
                    disabled
                  />
                </NFormItem>
              </NSpace>
            </NForm>
          </NSpace>
        </div>
      </NScrollbar>
    </div>
    <FixedAction>
      <NSpace justify="center">
        <NButton
          style="width: 78px"
          type="primary"
          @click="goBack"
        >
          返回
        </NButton>
      </NSpace>
    </FixedAction>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, watch } from 'vue';
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NCheckboxGroup,
  NCheckbox
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse,HttpResponsePagination } from '@/utils/http'
import { useRoute } from 'vue-router'

const tags = useTagStore().tags
const message = useMessage()
const route = useRoute()
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const title = ref('志愿者档案详情');
const id = ref('');
const sexListOption = ref([
  {
    label: '男',
    value: '0'
  },
  {
    label: '女',
    value: '1'
  }
])
const permanentListOption = ref([
  {
    label: '否',
    value: '0'
  },
  {
    label: '是',
    value: '1'
  }
])
const specialitysChecked = ref([]);
const serviceTypesChecked = ref([]);
const listOption = ref([])

const listJOption = ref([])

const listZOption = ref([])

const listMOption = ref([])

const listSOption = ref([])

const listIOption = ref([])

const serviceTypes = ref<any>([])

const specialitys = ref<any>([])

const userLogo = ref('');

let formValue = reactive<any>({
  bankCard: null,
  bankName: null,
  cardNum: null,
  cardType: null,
  cardTypeCode: null,
  education: null,
  educationCode: null,
  email: null,
  emergency: null,
  emergencyPhone: null,
  fileIds: null,
  fileList: [],
  fixedPhone: null,
  languages: [],
  leagueId: null,
  leagueName: null,
  level: null,
  levelCode: null,
  mailAddress: null,
  marriage: null,
  marriageCode: null,
  mobilePhone: null,
  name: null,
  nation: null,
  oicq: null,
  organization: null,
  otherSpeciality: null,
  placeAddress: null,
  position: null,
  residentFlag: null,
  serviceTypes: [],
  sex: null,
  specialitys: [],
  studyInfo: null,
  viewInfo: null,
  workInfo: null,
  zipCode: null
})

// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === route.path)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/volunteer/material/file/index' })
  } else history.back()
}

//证件类型下拉
const getZFunction = async () => {
  listZOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A37'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listZOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//婚姻类型下拉
const getMFunction = async () => {
  listMOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A53'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listMOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//级别类型下拉
const getJFunction = async () => {
  listJOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A51'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listJOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//学历类型下拉
const getSFunction = async () => {
  listSOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'clue',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A52'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listSOption.value.push({ label: i.dicName, value: i.dicCode })
  })
}

//下拉
const getFunction = async () => {
  listOption.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'volunteer',
    api: 'leagueOptions'
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    listOption.value.push({ label: i.label, value: i.value })
  })
}

//下拉
const getSpecityInit = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'volunteer',
    api: 'volunteerSpecityInit'
  })
  if (error) return message.error(error.message)
  serviceTypes.value = res.data.serviceTypes;
  specialitys.value = res.data.specialitys;
}

//修改
const confirm = async () => {
  if (id.value) {
    formRef.value?.validate(async (error) => {
      if (error) return
      try {
        const [error, data] = await sendRequest({
          module: 'volunteer',
          api: 'volunteerUpdate',
          override: {
            data: {
              id: id.value,
              ...formValue,
              serviceTypes: serviceTypes.value,
              specialitys: specialitys.value,
            }
          }
        })

        if (error) throw new Error(error.message)
        if (data.code !== 0) throw new Error(data.msg)
        message.success('操作成功')
        goBack()
      } catch (error: any) {
        message.error(error.message)
      }
    })
  } else {
    formRef.value?.validate(async (error) => {
      if (error) return
      try {
        const [error, data] = await sendRequest({
          module: 'volunteer',
          api: 'volunteerSave',
          override: {
            data: {
              ...formValue,
              serviceTypes: serviceTypes.value,
              specialitys: specialitys.value,
            }
          }
        })

        if (error) throw new Error(error.message)
        if (data.code !== 0) throw new Error(data.msg)
        message.success('操作成功')
        goBack()
      } catch (error: any) {
        message.error(error.message)
      }
    })
  }
  goBack()
}

onMounted(() => {
  id.value = route.query.id;
  getMFunction()
  getJFunction()
  getSFunction()
  getFunction()
  getZFunction()
})

const getInfo = async(id:number)=>{
  const [error, res] = await sendRequest<HttpResponsePagination<any>>({
    module: 'volunteer',
    api: 'volunteerInfo',
    uri: {
      id: id
    }
  })
  if (error) throw new Error(error.message)
  if (res.code !== 0) throw new Error(res.msg)
  let data:any = res.data;
  serviceTypes.value = data.serviceTypes;
  data.serviceTypes.forEach((item:any)=>{
    if (item.checked == 1) {
      serviceTypesChecked.value.push(item.value);
    }
  });
  specialitys.value = data.specialitys;
  data.specialitys.forEach((item:any)=>{
    if (item.checked == 1) {
      specialitysChecked.value.push(item.value);
    }
  });
  // formValue = data;
  data.sex = data.sex.toString();
  data.residentFlag = data.residentFlag.toString();
  Object.assign(formValue, data)
  if (data.fileList && data.fileList.length > 0) {
    let file = data.fileList[0];
    console.log('file', file)
    userLogo.value = file.path;
  }
}

watch(
  () => route,
  () => {
    if (route.path == '/volunteer/recruit/preselection/detail' && route.query.id)  getInfo(route.query.id);
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    font-size: 22px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #5fb17f;
    // @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
.title {
  width: 100%;
  margin-bottom: 2rem;
}
.img-image {
width: 96px;
height: 96px;
}
.bd-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
  text-align: center;
}
</style>
